<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11选择器的权重</title>
    <style>
        div{
            color: yellow;
        }
        .red{
            color: red;
        }
        /* 样式冲突：通过不同选择器选中相同元素，并且为相同的样式设置不同的值
            发生冲突时，由选择器的权重（优先级）决定应用哪个

            选择器的权重：
                内联样式（1，0，0，0）>
                id选择器（0，1，0，0）>
                类和伪类选择器（0，0，1，0）>
                元素选择器（0，0，0，1）>
                通配选择器（0，0，0，0）>
                继承选择器（没有优先级）

            比较优先级时，需要将所有的优先级进行相加计算，优先级越高越优先（分组选择器时单独计算）
                选择器的累加，不会超过其最大的数量级，类选择器再高也不会超过id选择器
                如果优先级相等，此时优先使用靠下边的样式
            可以在某一个样式的后面加!important ，变成最重要的，优先级高于内联
        */
    </style>
</head>
<body>
    <div id="box1" class="red" >我是一个div</div>
</body>
</html>